import { Space, Button, Modal, Form, Input, message, Avatar } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { useState } from "react";
import {
  changeInfo,
  uploadAvatar,
  changeTeacher,
  delTeacher,
  changeStu,
  delStu,
  changeUser
} from "../api/user";
import { useAuth, avatarBaseUrl } from "../context/AuthProvider";
// 布局结构
// 封装发布投稿的请求函数
// 交互(确定发布的事件)

const Action = (props) => {
  const [isModalOpen, setIsModalOpen] = useState([false, false]);
  const [avatar, setAvatar] = useState("");

  const type = props.type;
  
  const showModal = () => {
    // setIsModalOpen(true);
    console.log(props)
    setIsModalOpen((prevState) => {
      const newIsModal = [...prevState]; // 创建一个新的数组副本
      newIsModal[type] = true; // 修改指定索引的值
      return newIsModal; // 返回新的数组
    });
    console.log(props);
  };
  const handleCancel = () => {
    setIsModalOpen([false, false]);
  };
  const delUser = () => {
    if (props.type == 0) {
      if (window.confirm("您确定要删除此条教师信息吗？")) {
        delTeacher({ id: props.message.tid }).then((res) => {
          message.success("删除成功");
          // delTeacher({id:props.message.tid})
          console.log("delteacher", props);
          props.onData({ tid: props.message.tid, tname: "" });
        });
      }
    } else {
      if (window.confirm("您确定要删除此条学生信息吗？")) {
        delStu({ id: props.message.sid }).then((res) => {
          message.success("删除成功");
          console.log("delteacher", props);
          props.onData({ sid: props.message.sid, sname: "" });
        });
      }
      // 
      console.log("delStu", props);
    }
  };
  const onFinish = (values) => {
    if (type == 0) {
      const userdata={
        username:values.tname,
        password:values.password,
        loginid:values.tid,
      }
      changeUser(userdata)
      changeTeacher(values)
        .then((res) => {
          setIsModalOpen([false, false]);
          message.success("修改成功");
        })
        .finally(() => {
          props.onData(values);
        });
    } else {
      const userdata={
        username:values.sname,
        password:values.password,
        loginid:values.sid,
      }
      changeUser(userdata)
      changeStu(values)
        .then((res) => {
          setIsModalOpen([false, false]);
          message.success("修改成功");
        })
        .finally(() => {
          props.onData(values);
        });
    }
  };
  const change = (e) => {
    const avatarData = new FormData()
    console.log(e)
    avatarData.append('file', e.target.files[0]);
    console.log(avatarData);
    uploadAvatar(avatarData)
        .then(res => {
            setAvatar(res.url)

        })
}
  return (
    <>
      {/* <span onClick={showModal}>
                个人信息
            </span> */}
      <Space size="middle">
        <a onClick={showModal}>修改</a>
        <a onClick={delUser}>删除</a>
      </Space>
      <Modal
        title="个人信息"
        open={isModalOpen[0]}
        footer={null}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          layout="vertical"
          // style={{ width: 400, margin: '50px auto' }}
          onFinish={onFinish}
          autoComplete="off"
          initialValues={props.message}
        >
          <input onChange={change} style={{ display: 'none' }} id='avatar' type="file" />
                    <label htmlFor="avatar">
                        <Avatar src={avatar} size={40} icon={<UserOutlined />} />
                    </label>
          <Form.Item
            label="教工号"
            name="tid"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="姓名"
            name="tname"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="学院"
            name="subject"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button block shape="round" type="primary" htmlType="submit">
              确认修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title="个人信息"
        open={isModalOpen[1]}
        footer={null}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          layout="vertical"
          // style={{ width: 400, margin: '50px auto' }}
          onFinish={onFinish}
          autoComplete="off"
          initialValues={props.message}
        >
          <Form.Item
            label="学号"
            name="sid"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="姓名"
            name="sname"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          

          <Form.Item
            label="学院"
            name="ssub"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="年级"
            name="syear"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button block shape="round" type="primary" htmlType="submit">
              确认修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export default Action;
